<template>
	<view class="cate" :style="{height: wh+'px'}">
		<scroll-view class="cate-list" scroll-y :style="{height: wh+'px'}">
			<view class="item" :class="{active:selectId==item.id}" v-for="item,index in cateLst"
				@tap="selectId=item.id">
				{{item.name}}
			</view>
		</scroll-view>
	
		<scroll-view class="cate-goods" scroll-y>
			<GoodsItemH :goodsList="goodsList"></GoodsItemH>
		</scroll-view>
	</view>
</template>

<script setup>
	// onLoad是uniapp页面生命周期,必须要导入后使用
	import {
		onLoad,onReady
	} from "@dcloudio/uni-app"
	import {
		ref,
		watch
	} from "vue";
	import GoodsItem from "../../components/GoodsItem.vue"

	const wh = ref(0)
	onReady(()=>{
		console.log("windowHeight"+uni.getSystemInfoSync().windowHeight);
			console.log("screenHeight"+uni.getSystemInfoSync().screenHeight);	
			console.log("statusBarHeight"+uni.getSystemInfoSync().statusBarHeight);	
			if (uni.getSystemInfoSync().uniPlatform === 'mp-weixin') {
				// 微信端可视区域高度计算；uni.getWindowInfo().windowHeight
				wh.value = uni.getWindowInfo().windowHeight
			} else {
				// h5端可视区域高度，需要减去导航栏和tabbar的高度
				// tabbar 默认高度50,导航栏默认高度44
				wh.value = uni.getWindowInfo().windowHeight  
			}
			console.log(wh.value);
			console.log(uni.getWindowInfo().windowHeight);
	})
	onLoad(() => {
		getCateLst()
		getGoodsByCateOneId(selectId.value)

	})

	let selectId = ref(0)

	// 监听选中类别的id变化	
	watch(selectId, (nv, ov) => {
 		getGoodsByCateOneId(nv)
	})

	// 商品列表
	const goodsList = ref([])

	function getGoodsByCateOneId(cid) {
		if (cid != 0) {
			uni.$post("/goodsList_catTwo", {
				"cat_two_id": cid
			}).then((res) => {
				console.log(res);
				goodsList.value = res.goodsList.map(item => {
					item.goods_big_logo = uni.$base_url + item.goods_big_logo
					return item;
				})
			})
			//全部
		} else {
			uni.$get("/goodsList", {}).then((res) => {
				goodsList.value = res.goodsList.map(item => {
					item.goods_big_logo = uni.$base_url + item.goods_big_logo
					return item;
				})
				console.log(goodsList);
			})
		}

	}



	//一级分类列表
	const cateLst = ref([])

	function getCateLst() {
		// 请求接口
		uni.$post("/categoryListLevel", {
			"level": 1
		}).then((res => {

			if (res.code == 200) {
				cateLst.value = res.result.map(item => {
					item.icon = uni.$base_url + item.icon
					return item
				})
				// 在返回的一级列表中之前,添加"全部"项,并设置id为0
				cateLst.value.unshift({
					id: 0,
					name: '全部'
				})
				// console.log(cateLst.value)
			} else {
				uni.showToast({
					icon: "exception",
					title: "服务器错误"
				})
			}
		})).catch((err) => {
			uni.showToast({
				icon: "exception",
				title: "网络错误"
			})
		})
	}
</script>

<style scoped>
	/* 在有scrollview组件的容器中,需要设计容器的高度 */
	.cate {
		display: flex;
		/* 这里的减号之间要留有空格,否则无效 */
		/* height: calc(100vh - 50px - 48px); */
		/* border: 1px solid green; */
		/* 	// 计算容器高度：需要根据视口高度-自定义的导航栏过度
		// 如果是微信小程序,还需要在减去顶部的状态栏18px，参考导航栏组件定义的样式	 */
		/* 	//#ifdef MP-WEIXIN

		height: calc(100vh);
		//#endif 
		//#ifdef H5 
		height: calc(100vh - 48px - 50px);

		//#endif */
		/* // border: 1px solid red; */
	}

	.cate .cate-list {
		width: 180rpx;
		background-color: #efefef
	}

	/* // 类别列表中每一项的样式 */
	.cate .cate-list .item {
		font-size: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	/* //类别列表项选中样式 */
	.cate .cate-list .active {
		background-color: #ff6a00;
		border-left: 2px solid #ff6a00;
		color: #fff;

	}

	/* // 商品列表区域样式 */
	.cate .cate-goods {
		width: 570rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}





	/* 这里最后一级使用子代选择器无效,原因待查 */
</style>